<template>
  <div class="questionHomepage">

    <div class="questionCon">
      <div class="topImg"></div>
      <div class="box">
        <div class="boxList">
          <div class="questionList">
            <div class="questionNav">
              <p class="homepageTitle">浙江建工员工综合评价表</p>
              <p class="questionInfo">您好！非常感谢您愿意用几分钟的时间完成本次调查问卷。所有答卷信息都将保密，请放心填写！</p>
            </div>
            <div class="listName">
              <span>被评价者：</span>
              <el-select v-model="evaluateVal"
                         @change="choosePeople"
                         placeholder="请选择">
                <el-option v-for="item in evaluateOptions"
                           :key="item.person_id"
                           :label="item.person_name"
                           :value="item.person_id">
                </el-option>
              </el-select>
            </div>
            <div class="score">
              <span>{{this.all}}</span>
              <p>当前分值</p>
            </div>
            <div class="listCon"
                 v-for="(item,index) in questionList"
                 :key="item.question_id">
              <p class="questionTitle">{{item.question_id+'、'+item.question_name + '('+item.score+'分)'}}</p>
              <div style="position:relative;margin: 0 20px;">
                <el-slider style="position:relative"
                           show-input
                           v-model="item.sliderVal"
                           @change="changeVal(index)"
                           :max="Number(item.score)"
                           tooltip-class="changeTooltip">
                </el-slider>
                <div :style="{'left':(item.sliderVal/item.score)*100-5.5+'%'}"
                     class="scoreVal">
                  {{item.sliderVal}}
                </div>
                <div class="tipBot">
                  <div>非常不符合</div>
                  <div>非常符合</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button>取消</el-button>
          <el-button type="primary"
                     @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      sliderList: [],
      exerciseId: '', //问卷id
      dataId: '',//评价人数据id
      evaluate_data: [],
      phoneVal: '',
      evaluateVal: "",
      sliderVal: 0,
      evaluateOptions: [],
      questionList: [],
      all: 0,
      arrs: [],
    }
  },
  created () {
    this.phoneVal = this.$route.query.phone
    this.selEvaluate()
  },
  mounted () {

  },
  watch: {},
  methods: {
    //分值
    changeVal () {
      this.arrs = []
      this.all = 0
      this.questionList.forEach(item => {
        let submit = {
          question_id: item.question_id,
          score: item.sliderVal
        }
        this.arrs.push(submit)
      })
      this.arrs.forEach((val, i) => {
        this.all += val.score
      })
    },
    //评价人选择
    selEvaluate () {
      backEvaluateApi.seclectPeople({
        params: {
          phone: this.phoneVal
        }
      }).then((res) => {
        this.evaluateOptions = res.data.list
        this.evaluateVal = this.evaluateOptions[0].person_id
        this.exerciseId = this.evaluateOptions[0].exercise_id
        this.getQuestionList()
      }).catch(err => {
        console.log(err);
      })
    },
    //选中被评论人
    choosePeople (val) {
      this.evaluateOptions.forEach(item => {
        if (item.person_id === val) {
          this.exerciseId = item.exercise_id
          this.dataId = item.evaluator_data_id
        }
        this.all = 0
      })
      this.getQuestionList()
    },
    //获取问题列表
    getQuestionList () {
      backEvaluateApi.lookTestList({
        params: {
          exercise_id: this.exerciseId,
          is_page: 0
        }
      }).then((res) => {
        this.questionList = res.data.list
        this.questionList.map((item) => {
          this.$set(item, 'sliderVal', 0)
        })
      }).catch(err => {
        console.log(err);
      })
    },
    //提交
    submit () {
      if (this.dataId === '') {
        this.$message.warning('请先选择被评价人')
      } else {
        backEvaluateApi.submitResult({
          data: {
            evaluator_data_id: this.dataId,
            score: this.all,
            evaluate_data: this.arrs
          }
        }).then((res) => {
          if (res.code === 0) {
            this.$message.success('提交成功')
          }
        }).catch(err => {
          console.log(err);
        })
      }

    }
  },
  computed: {},
}
</script>
<style>
html,
body {
  height: 100%;
}
#hibuilding-app {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.questionHomepage {
  position: relative;
  background-color: #efeff4;
  height: 100%;
  .box {
    background-color: #fff;
    margin: 0px 15px;
  }
  .boxList {
    padding: 0 15px;
    margin-top: -108px;
  }
  .topImg {
    height: 30vh;
    background-image: url("../../../assets/questionImg/top-banner.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
  .questionCon {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #efeff4;
    .questionNav {
      text-align: center;
      line-height: 40px;
      border-bottom: solid 1px #d9d9d9;
      .homepageTitle {
        font-size: 20px;
        font-family: "PingFang SC Semibold";
        font-weight: 600;
        color: #333;
        padding: 20px 0;
      }
      .questionInfo {
        padding-bottom: 20px;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-align: center;
        color: #666;
      }
    }
    .questionList {
      padding: 20px 0;
      font-size: 12px;
      border-bottom: 1px solid #d9d9d9;
      .listName {
        margin-top: 20px;
        span {
          font-size: 14px;
        }
        .el-select /deep/.el-input {
          width: 110%;
          /deep/.el-input__inner {
            width: 100%;
          }
        }
      }
      .score {
        width: 96px;
        height: 96px;
        background: #e6f7ff;
        border: 1px solid #69c0ff;
        border-radius: 50%;
        margin: 15px auto;
        text-align: center;
        span {
          font-family: "Microsoft YaHei Semibold";
          font-weight: 600;
          font-size: 36px;
          display: block;
          margin-top: 15px;
          color: #1890ff;
        }
      }
      .listCon {
        padding: 10px 0 70px 0;
        // margin-top: 30px;
        // margin-bottom: 55px;
        .questionTitle {
          font-family: "PingFang SC Medium";
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          text-align: left;
          color: #333;
        }
        span {
          position: absolute;
        }
      }
      .tipBot {
        display: flex;
        justify-content: space-between;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        :nth-child(1) {
          color: #666666;
        }
        :nth-child(2) {
          color: #333333;
        }
      }
    }
  }
  .el-slider /deep/.el-slider__input {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-slider /deep/.el-slider__runway.show-input {
    width: 100%;
    height: 2px;
    margin: 25px auto;
    background-color: #bae7ff;
  }
  .el-slider /deep/ .el-slider__bar {
    height: 2px;
    background-color: #1890ff;
  }
  .el-slider /deep/.el-slider__button {
    width: 32px;
    height: 32px;
    border: 2px solid #1890ff;
    background-color: #1890ff;
  }
  .scoreVal {
    width: 32px;
    height: 32px;
    z-index: 9999;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    position: absolute;
    top: 12px;
  }
  .bottomBtn {
    text-align: center;
    padding-bottom: 20px;
    .el-button {
      width: 38vw;
    }
  }
}
</style>
<style lang="scss">
.changeTooltip {
  font-size: 15px;
  background: transparent !important;
  span {
    display: none;
    // color: #000;
    // top: 41px;
    // left: 5px;
    // position: absolute;
  }
  .popper__arrow::after {
    content: "";
    border-width: 0px !important;
  }
  .popper__arrow {
    border-width: 0px !important;
  }
  .el-slider__marks-text {
    margin-top: 30px;
  }
}
</style>
